<!-- @format -->

<template>
	<a-modal :mask-closable="false" 
		width="auto"
		:top="40"
		v-model:visible="props.visibleRecord"
		:alignCenter="false"
		@cancel="cancel"
		:body-style="{
			padding: 0,
		}"
	>
		<template #title> 打印 </template>
		<div class="view-contentes">
			<div class="form">
				<div class="form-item">
					<lable>作业地点： </lable><a-input v-model="form.w_address"></a-input>
				</div>
				<div class="form-item">
					<!-- <lable>作业项目： </lable><a-input v-model="form.w_item"></a-input> -->
					<lable> 作业项目：</lable>
					<a-select
						v-model:model-value="form.w_item"
						placeholder="请选择作业项目"
					>
						<a-option
							:label="item"
							:value="index"
							v-for="(item, index) in w_items"
							:key="index"
						/>
					</a-select>
				</div>
				<div class="form-item w100">
					<lable>司机： </lable
					><a-select
						:model-value="drivers_id"
						placeholder="请选择司机"
						@change="driversChange"
						:multiple="true"
					>
						<template #label="{ data }">
							<span
								><a-tag color="blue" size="large">{{
									data?.label
								}}</a-tag></span
							>
						</template>
						<a-option
							v-for="item of props.drivers"
							:value="item.car_no"
							:label="item?.car_no"
						/>
					</a-select>
				</div>

				<div class="form-item">
					<lable>备注： </lable><a-input v-model="form.remarks"></a-input>
				</div>
			</div>
			<div id="prient-contentes">
				<div style="text-align: center; font-size: 28px; margin-bottom: 3px">
					<h2>装卸车作业派工单</h2>
				</div>
				<div class="table-heade">
					<div class="p-2">
						时间：{{ timeFormat(new Date(), "yyyy/mm/dd") }}
					</div>
					<div class="p-2">货主：{{ props.data[0].dept_name }}</div>
				</div>
				<table
					border="1"
					cellspacing="12"
					cellpadding="20"
					border-collapse="collapse"
				>
					<tr>
						<td colspan="11" class="text-left">
							1.认真做好作业前后三检，严格执行“十不吊”：
						</td>
					</tr>
					<tr>
						<td colspan="11" class="text-left">
							2.注意吊装作业安全，按规定使用手钩，与吊物保持安全距离；
						</td>
					</tr>
					<tr>
						<td colspan="11" class="text-left">
							3.注意吊装座架与集装箱F-TR锁作业安全；
						</td>
					</tr>
					<tr>
						<td colspan="11" class="text-left">4.注意圆形物资塞垫：</td>
					</tr>
					<tr>
						<td colspan="11" class="text-left">
							5.作业完毕后，装卸人员做好物尽场清；采取防风措施，插好地锚；
						</td>
					</tr>
					<tr>
						<td colspan="11" class="text-left">
							6.作业完毕后，装卸外勤共同检查车辆状况，拍照留存，并相互签字确认。
						</td>
					</tr>
					<tr>
						<td>序号</td>
						<td>作业地点</td>
						<td>作业项目</td>
						<td>车号/仓位</td>
						<td>品类</td>
						<td v-if="inforow?.transport_type == 2">件数</td>
						<td v-if="inforow?.transport_type == 1">箱号</td>
						<td v-if="inforow?.transport_type == 1">箱型箱类</td>
						<td>重量</td>
						<!-- <td>区位</td> -->
						<td>备注</td>
					</tr>
					{{console.log('打印：',props.data)}}
					<tr v-for="(it, i) in props.data" :key="i">
						
						<td>
							{{ i + 1 }}
						</td>
						<td>
							{{ form.w_address }}
						</td>
						<td>
							{{ w_items[form.w_item] }}
						</td>
						<td v-if="inforow?.pick_type==1 || inforow?.pick_type==2">
							{{it.prediction.car_no}}
							
						</td>
						<td v-else>
							{{ it.wareuserdetail.warehouse_link == null?"": it.wareuserdetail.warehouse_link?.warehouse?.name + '/' + it.wareuserdetail.warehouse_link?.horizontal_position + '-' + it.wareuserdetail.warehouse_link?.release_position + '-' + it.wareuserdetail.warehouse_link?.reaches_position }}
						</td>
						<td>
							{{ (inforow?.pick_type==1 || inforow?.pick_type==2) ? it.prediction.goods_name : it.wareuserdetail.goods_name }}
						</td>
						
						<td v-if="inforow?.transport_type == 2">
							{{ it.pick_number_yu }}
						</td>
						<td v-if="inforow?.transport_type == 1">
							{{ (inforow?.pick_type==1 || inforow?.pick_type==2) ? it.prediction.box : it.wareuserdetail.box }}
						</td>
						<td v-if="inforow?.transport_type == 1">
							{{ (inforow?.pick_type==1 || inforow?.pick_type==2) ? it.prediction.box_type : it.wareuserdetail.box_type }}
						</td>
						<td>
							{{ it.pick_weight_yu }}
						</td>
						<!-- <td></td> -->
						<td>
							{{ form.remarks }}
						</td>
					</tr>
					<tr>
						<td>总计</td>
						<td></td>
						<td></td>
						<td></td>
						<!-- <td></td> -->
						<td></td>
						<td v-if="inforow?.transport_type == 2">{{ total_pieces }}</td>
						<td v-if="inforow?.transport_type == 1"></td>
						<td v-if="inforow?.transport_type == 1"></td>
						<td>{{ total_weight }}</td>
						<!-- <td></td> -->
						<td></td>
					</tr>
					<tr>
						<td>司机</td>
						<td colspan="9" class="text-wrap text-left p-l p-r">
							{{ t_drivers }}
						</td>
					</tr>
				</table>
				<div class="border-bottom border-left border-right p-2 blank">
					调度：<span></span> 外勤：<span></span>装卸队长：<span
					></span>派工时间：{{ timeFormat(new Date(), "hh时MM分") }}
				</div>
			</div>
		</div>

		<template #footer>
			<a-button v-print="printObj" type="primary">打印</a-button>
		</template>
	</a-modal>
</template>

<script setup>
	import {
		defineProps,
		defineEmits,
		ref,
		reactive,
		computed,
		onMounted,
	} from "vue";
	import timeFormat from "@/utils/timeFormat.js";
	import predictionOrder from "@/api/prediction/predictionOrder";

	const emit = defineEmits(["change"]);

	const printObj = {
		id: "prient-contentes",
		popTitle: "页面打印",
		openCallback: (vue) => {
			predictionOrder.addPrintRecord({
				type: 1,
				link_id: props.link_id,
				print_data: form,
			});
		},
	};

	const props = defineProps({
		visibleRecord: {
			type: Boolean,
			default: false,
		},
		data: {
			type: Array,
			default: [],
		},
		columns: {
			type: Array,
			required: true,
		},
		link_id: {
			type: Number,
		},
		drivers: {
			default: [],
		},
		inforow:{
			type: Object,
			default:{},
		}
	});
	
	const cancel = (e) => {
		emit("cancel");
	};

	// 表单所需要的字段
	const form = reactive({
		w_address: "",
		w_item: "",
		remarks: "",
	});

	let w_items = ref(["装汽车", "卸火车", "装火车"]);

	onMounted(() => {
		props.drivers.forEach((item) => drivers_id.value.push(item.car_no));
	});

	let drivers_id = ref([]);

	const drivers = ref();

	const driversChange = (index) => {
		drivers_id.value = index;
	};

	let t_drivers = computed(() => {
		return drivers_id.value.join("、");
	});

	// 总计
	let total_weight = computed(() => {
		let c_weight = 0;
		props.data?.reduce((total, value, index, arr) => {
			c_weight += (value.pick_weight_yu - 0);
		}, c_weight);
		
		return c_weight.toFixed(3);
	});
	let total_pieces = computed(() => {
		let c_pieces = 0;
		props.data?.reduce((total, value, index, arr) => {
			c_pieces += value.pick_number;
		}, c_pieces);
		return c_pieces;
	});
</script>

<style lang="less" scoped>
	.view-contentes {
		height: 75vh;
		width: 794px;
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}

	.form {
		display: flex;
		padding: 24px 36px 0 0;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		flex: 0 0 auto;
		> .form-item {
			width: 45%;
			margin-bottom: 24px;
			display: flex;
			flex: 1 0 auto;
			padding-left: 36px;
			align-items: center;
			max-width: 100%;
			box-sizing: border-box;

			lable {
				width: 80px;
				flex-shrink: 0;
			}
		}
	}

	#prient-contentes {
		width: 100%;
		padding: 24px 36px;
		flex-grow: 1;
		overflow: hidden auto;

		.table-heade {
			display: flex;
			border: 1px solid #000;
			border-bottom: none;

			> div {
				width: 50%;
				box-sizing: border-box;
				&:nth-of-type(1) {
					border-right: 1px solid #000;
				}
			}
		}

		table {
			border-right: 1px solid #000;
			border-bottom: 1px solid #000;
			width: 100%;
			box-sizing: border-box;
			overflow: hidden auto;

			tr {
				width: 100%;
				overflow-x: hidden;
			}

			td {
				border-left: 1px solid #000;
				border-top: 1px solid #000;
				flex: 1 1 auto;
				text-align: center;
				white-space: nowrap;
				padding: 0 2px;
				overflow-x: hidden;
				min-width: 30px;
				max-width: 150px;
			}
		}
	}

	.text-wrap {
		white-space: normal !important;
	}

	.blank {
		span {
			width: 100px;
			height: 100%;
			display: inline-block;
		}
	}

	.text-left {
		text-align: left !important;
	}

	.border-top {
		border-top: 1px solid #000;
	}

	.border-left {
		border-left: 1px solid #000;
	}

	.border-right {
		border-right: 1px solid #000;
	}

	.border-bottom {
		border-bottom: 1px solid #000;
	}

	.p-2 {
		padding: 3px;
	}

	.p-l {
		padding-left: 10px !important;
	}

	.p-r {
		padding-right: 10px !important;
	}

	.w100 {
		width: 100% !important;
	}
</style>

<style>
	@media print {
		@page {
			size: auto;
		}
		body,
		html {
			height: auto !important;
			overflow: initial !important;
		}
	}
</style>
